<template>
    <div class="layout">
        <el-container>
            <!-- 侧边栏 -->
            <SideMenu />
            <el-container direction="vertical">
                <!-- 头部组件 -->
                <TopHeader />
                <!-- 导航 -->
                <Breadcrumb />
                <el-main> <router-view /></el-main>
            </el-container>
        </el-container>
    </div>
</template>


<script setup lang="ts">
// 头部组件
import TopHeader from '@/components/Layout/TopHeader.vue'
// 侧边栏
import SideMenu from '@/components/Layout/SideMenu.vue'
// 导航栏
import Breadcrumb from '@/components/Layout/Breadcrumb.vue'
</script>
<style lang="less" scoped>
.el-container {
    width: 100%;
    height: 100vh;
    display: flex;
}
.el-container{
    display: flex;
    // flex-direction: column;
}
.el-main {
    background-color: #f2f2f2;
}
</style>